import queryString from "query-string";

const Tabs = function(class_) {
  if (!(this instanceof Tabs)) {
    return new Tabs(class_);
  }
  const { index = 1 } = queryString.parse(window.location.search);
  this.lis = window.$(class_).find(".layui-tab-title li");
  this.liW = this.lis.eq(0).width();
  this.lisWrap = window.$(class_).find(".js_article_title");
  this.connent = window.$(class_).find(".layui-tab-item");
  this.activeIndex = Number(index) - 1;
  this.init();
};

Tabs.prototype = {
  constructor: Tabs,
  init: function() {
    this.handleTab();
    this.initScroll();
  },
  handleTab: function() {
    let _that = this,
      $ = window.$,
      translat = 0;
    _that.lis.on("click", function() {
      let index = $(this).index();
      for (let i = 0; i < _that.lis.length; i++) {
        _that.lis.eq(i).removeClass("active");
        _that.connent.eq(i).removeClass("active");
      }
      if (index >= 2) {
        translat = -_that.liW * (index - 2);
      } else {
        translat = 0;
      }
      // _that.scrollTo(translat);
      console.log(translat)
      $(this).addClass("active");
      _that.connent.eq(index).addClass("active");
    });
  },
  initScroll: function() {
    let _that = this,
      translat = 0;
    _that.lisWrap.css("width", _that.lis.length * _that.liW + "px");
    if (_that.activeIndex >= 2) {
      translat = -_that.liW * (_that.activeIndex - 2);
    }
    if (_that.lisWrap.length) {
      for (let i = 0; i < _that.lis.length; i++) {
        _that.lis.eq(_that.activeIndex).addClass("active");
        _that.connent.eq(_that.activeIndex).addClass("active");
      }
    }
    // _that.scrollTo(translat);
    console.log(translat)
  },
  scrollTo: function(to) {
    const _that = this;
    _that.lisWrap.css("transform", () => {
      return `translate3d(${to}px, 0px, 0px)`;
    });
  },
};

export default Tabs;
